<template>
  <view class="">
    <u-popup :customStyle="{background: 'transparent'}" :safeAreaInsetBottom="false" :show="isShow" mode="center"
             @close="close">
      <view class="wrap">
        <image class="close" mode="" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/close.png"
               @click="close"></image>
        <view v-if="!type" class="content flex">
          <image
              :src="`https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/${result === 'success' ? 'suc' : 'fail'}.png`"
              class="img"
              mode=""></image>
          <view :class="result === 'success' ? '' : 'fail'" class="tips">
            {{ content ? content : result === 'success' ? '绑定成功' : '该学生信息不存在，请确认信息输入是否正确' }}
          </view>
          <image :style="{marginTop: result === 'success' ? '111rpx' : '65rpx'}" class="btn"
                 src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/qr.png"
                 @click="submit"></image>
        </view>
        <view v-if="type === 'signin'" class="content flex">
          <image
              :src="btn_type !== 2 ? 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tips-fail.png' : 'https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tips-success.png'"
              class="tips-logo"
              mode=""></image>
          <view v-if="btn_type === 0" class="tips-p">
            是否确认开启签到，开启后参<br>与者可进行签到获取任务，行<br>程状态开始
          </view>
          <view v-if="btn_type === 1" class="tips-p">
            还未到活动开始时间，无法开<br>启签到
          </view>
          <view v-if="btn_type === 2" class="tips-p">
            开启成功，学员可点击签到获<br>取任务
          </view>
          <view class="tips-btn flex">
            <image v-if="btn_type === 0" mode=""
                   src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/fanhui1.png"
                   style="margin-right: 50rpx;" @click="close"></image>
            <image v-if="btn_type === 0" mode=""
                   src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/queding1.png"
                   @click="clickOpen"></image>
            <image v-else mode="" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/queding2.png"
                   style="width: 380rpx;height: 90rpx;" @click="close"></image>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
      result: 'fail',
      content: '',
      // 根据type来展示
      type: '',
      btn_type: 0,
    }
  },
  methods: {
    show(type) {
      this.type = type ? type : '';
      if (type === 'signin') {
        this.btn_type = 0;
      }
      this.isShow = true;
    },
    close() {
      this.isShow = false;
      this.$emit('close', {
        result: this.result,
      })
    },
    clickOpen() {
      this.$emit('clickOpen', {
        open: true
      })
    },
    submit() {
      this.close();
      this.$emit('next', {
        result: this.result,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.tips-logo {
  width: 120rpx;
  height: 120rpx;
}

.tips-btn {
  image {
    width: 213.11rpx;
    height: 73.77rpx;
  }
}

.tips-p {
  font-size: 36rpx;
  font-weight: 400;
  letter-spacing: 0pt;
  line-height: 52.13rpx;
  color: rgba(0, 0, 0, 1);
  margin: 23rpx 0 54rpx;
  text-align: center;
}

.wrap {
  width: 670rpx;
  padding: 30rpx 0 40rpx;
  box-sizing: border-box;
  background: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-h.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .close {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top: 0;
    right: 0;
  }
}

.content {
  width: 550rpx;
  background: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-b.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 60rpx 40rpx 90rpx;
  flex-direction: column;

  .img {
    width: 140rpx;
    height: 140rpx;
    margin-bottom: 50rpx;
  }

  .tips {
    font-size: 45rpx;
    font-weight: 400;
    letter-spacing: 0pt;
    line-height: 65.16rpx;
    color: rgba(0, 0, 0, 1);
    text-align: center;
  }

  .fail {
    font-size: 36rpx;
    font-weight: 400;
    line-height: 52.13rpx;
    color: rgba(0, 0, 0, 1);
  }

  .btn {
    width: 380rpx;
    height: 90rpx;
  }
}

.content1 {
  background-image: url('https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/modal-bg-b1.png');
}
</style>
